<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { login } from '@/api/user';
import { useAppStore, useUserStore } from '@/stores';

const benefits = ref<any>([
	{
		icon: '/index/rocket.png',
		title: '美食饮品',
		subtitle: '低至5折'
	},
	{
		icon: '/index/book.png',
		title: '兴趣课程',
		subtitle: '低至5折'
	},
	{
		icon: '/index/car.png',
		title: '汽车美容',
		subtitle: '低至5折'
	},
	{
		icon: '/index/woman.png',
		title: '美容美发',
		subtitle: '低至5折'
	},
	{
		icon: '/index/lock.png',
		title: '即将上线',
		subtitle: '敬请期待'
	},
	{
		icon: '/index/lock.png',
		title: '即将上线',
		subtitle: '敬请期待'
	},
	{
		icon: '/index/lock.png',
		title: '即将上线',
		subtitle: '敬请期待'
	},
	{
		icon: '/index/lock.png',
		title: '即将上线',
		subtitle: '敬请期待'
	}
]);

const appStore = useAppStore();
const userStore = useUserStore();
const agreement = ref(false);

onLoad(() => {
	const token = uni.getStorageSync('token');
	if (!token) {
		uni.login({
			provider: 'weixin',
			onlyAuthorize: true,
			success: async function (event) {
				const response = await login({
					appId: appStore.config.appId,
					code: event.code
				});
				if (response.code === 200) {
					uni.setStorageSync('token', response.data.token);
				}
			}
		});
	} else {
		userStore.getUserInfo();
	}
});

onShareAppMessage(() => {
	return {
		title: '邀请您成为大蓝卡会员，享受天天五折',
		path: '/pages/index/index',
		imageUrl: 'https://static.xiaolanlk.com/dlk-mobile/share-cover.png'
	};
});

onShareTimeline(() => {
	return {
		title: '邀请您成为大蓝卡会员，享受天天五折',
		path: '/pages/index/index',
		imageUrl: 'https://static.xiaolanlk.com/dlk-mobile/share-cover.png'
	};
});

async function handleJoinMember() {
	if (!agreement.value) {
		uni.showModal({
			title: '开通会员',
			content: '您好，请仔细阅读《付费会员服务协议》，如同意请打勾。',
			showCancel: false,
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
		return;
	}

	const data = await userStore.doJoinMember();
	if (data.prepayId) {
		const paymentData = await appStore.doPayment({
			prepayId: data.prepayId
		});
		if (paymentData) {
			uni.getProvider({
				service: 'payment',
				success: function (res) {
					if (res.provider[0] === 'wxpay') {
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: {},
							timeStamp: paymentData.timeStamp,
							nonceStr: paymentData.nonceStr,
							package: paymentData.package,
							signType: paymentData.signType,
							paySign: paymentData.paySign,
							success: function (res) {
								if (res.errMsg === 'requestPayment:ok') {
									uni.showModal({
										title: '开通会员',
										content: '您好，欢迎加入大蓝卡会员',
										showCancel: false,
										success: function (res) {
											if (res.confirm) {
												console.log('用户点击确定');
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
								}
							},
							fail: function (err) {
								console.log('支付失败:' + JSON.stringify(err));
							}
						});
					}
				}
			});
		}
	}
}

function handleView() {
	uni.navigateTo({
		url: '/pages/product/product'
	});
}
</script>

<template>
	<view class="content">
		<x-title-bar title="大蓝卡"></x-title-bar>
		<view class="header">
			<image src="https://static.xiaolanlk.com/dlk-mobile/index/diamond.png" class="diamond"></image>
		</view>
		<view class="card">
			<button open-type="share" class="share">
				<x-image src="/index/share.png" width="145rpx" mode="widthFix" prefix></x-image>
			</button>
			<x-image src="/index/dalanka-label.png" width="276rpx" class="title" mode="widthFix" prefix></x-image>
			<x-image src="/index/unlock.png" width="131rpx" class="unlock" mode="widthFix" v-if="!userStore.user.isMember" prefix></x-image>
			<view class="slogan">用大蓝卡，天天五折</view>
			<view class="bottom" v-if="userStore.user.isMember">
				<view>到期：{{ userStore.user.expirationDate }}</view>
				<view>NO.{{ userStore.user.memberNo }}</view>
			</view>
		</view>
		<view class="benefit">
			<view class="container">
				<view class="title">· 会员权益 ·</view>
				<view class="benefit-wrapper">
					<view class="benefit-item" v-for="(item, key) in benefits" :key="key">
						<view class="benefit-item-cover">
							<x-image :src="item.icon" width="80rpx" mode="widthFix" v-if="userStore.user.isMember" prefix></x-image>
							<x-image src="/index/lock.png" width="80rpx" mode="widthFix" v-else prefix></x-image>
						</view>
						<view class="benefit-item-title">{{ item.title }}</view>
						<view class="benefit-item-subtitle">{{ item.subtitle }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="action-bar">
			<template v-if="!userStore.user.isMember">
				<view class="agreement">
					<label class="agreement-label" @tap="agreement = !agreement">
						<checkbox :checked="agreement" style="transform: scale(0.6)" />
						开通会员代表接受
						<navigator url="/pages/agreement/agreement">《付费会员服务协议》</navigator>
					</label>
				</view>
				<view class="join-member">
					<view class="price">
						<view class="now">
							限时
							<text>9.9</text>
							元/月
						</view>
						<view class="original">原价68元/月</view>
					</view>
					<view class="button" @tap="handleJoinMember">立即成为</view>
				</view>
			</template>
			<template v-else>
				<view class="view-goods">
					<view class="text">您今日的五折商品已送达</view>
					<view class="button" @tap="handleView">立即查看</view>
				</view>
			</template>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	padding-bottom: 300rpx;
	background: url('https://static.xiaolanlk.com/dlk-mobile/index/bg.png') top left / 100% no-repeat #0e0d0d;

	.header {
		width: 100%;
		height: 570rpx;
		position: relative;

		.diamond {
			position: absolute;
			left: 50%;
			top: 100rpx;
			transform: translateX(-50%);
			width: 318rpx;
			height: 264rpx;
			animation: floatUpDown 6s ease-in-out infinite;
		}
	}

	.card {
		position: relative;
		margin: -20rpx auto 0;
		width: 690rpx;
		height: 434rpx;
		background: url('https://static.xiaolanlk.com/dlk-mobile/index/card-bg.png') no-repeat top left/cover;

		.unlock {
			position: absolute;
			left: 5rpx;
			top: 5rpx;
		}

		.share {
			display: flex;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			background-color: transparent;
			border: none;
			padding: 0;
			line-height: 1;

			&::after {
				border: none;
			}
		}

		.slogan {
			position: absolute;
			left: 30rpx;
			top: 207rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #fff;
		}

		.title {
			position: absolute;
			left: 30rpx;
			top: 78rpx;
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 40rpx;
			font-size: 26rpx;
			color: #fff;
		}
	}

	.benefit {
		margin: 20rpx auto 0;
		width: 690rpx;
		height: 538rpx;
		background-image: conic-gradient(from 90deg at 50% 50%, rgba(94, 92, 88, 1) 1.84%, rgba(41, 35, 29, 1) 22.16%, rgba(186, 173, 153, 1) 38.31%, rgba(99, 86, 68, 1) 61.33%, rgba(255, 253, 247, 1) 75.22%, rgba(115, 109, 98, 1) 86.55%);
		border-radius: 20rpx;
		position: relative;

		.container {
			position: absolute;
			left: 2rpx;
			top: 2rpx;
			width: calc(100% - 5rpx);
			height: calc(100% - 5rpx);
			background-color: #262520;
			border-radius: 20rpx;

			.title {
				margin-top: 40rpx;
				font-size: 32rpx;
				line-height: 44rpx;
				color: #fff;
				text-align: center;
			}
		}

		&-wrapper {
			margin: 30rpx 48rpx 0;
			display: flex;
			gap: 20rpx;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		&-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			&-cover {
				width: 80rpx;
				height: 80rpx;
			}

			&-title {
				margin-top: 16rpx;
				font-size: 28rpx;
				line-height: 38rpx;
				color: #fff;
			}

			&-subtitle {
				margin-top: 4rpx;
				font-size: 24rpx;
				line-height: 32rpx;
				color: rgba(255, 255, 255, 0.6);
			}
		}
	}

	.action-bar {
		background-color: #fff;
		position: fixed;
		bottom: 90rpx;
		left: 0;
		width: 100%;
		height: 209rpx;
		border-radius: 24rpx 24rpx 0 0;

		.agreement {
			color: #333;
			font-size: 28rpx;
			margin: 24rpx 30rpx;

			&-label {
				display: flex;
				align-items: center;
			}
		}
	}

	.view-goods {
		display: flex;
		justify-content: space-between;
		background-color: #010b1c;
		border-radius: 200rpx;
		margin: 50rpx 30rpx 0;
		height: 90rpx;
		background: url('https://static.xiaolanlk.com/dlk-mobile/index/join-button.png') no-repeat top right/100% auto;

		.text {
			color: #fff;
			margin-top: 26rpx;
			margin-left: 50rpx;
		}

		.button {
			font-size: 36rpx;
			color: #925c1c;
			width: 271rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-indent: 80rpx;
		}
	}

	.join-member {
		display: flex;
		justify-content: space-between;
		background-color: #010b1c;
		border-radius: 200rpx;
		margin: 0 30rpx;
		height: 90rpx;
		background: url('https://static.xiaolanlk.com/dlk-mobile/index/join-button.png') no-repeat top right/100% auto;

		.price {
			display: flex;
			padding-left: 40rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			gap: 16rpx;
			align-items: flex-end;

			.now {
				font-size: 28rpx;
				color: #fff;
				line-height: 40rpx;

				> text {
					font-size: 48rpx;
				}
			}

			.original {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.5);
				text-decoration: line-through;
			}
		}

		.button {
			font-size: 36rpx;
			color: #925c1c;
			width: 271rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-indent: 80rpx;
		}
	}
}

@keyframes floatUpDown {
	0%,
	100% {
		transform: translate(-50%, 0);
	}

	50% {
		transform: translate(-50%, -6px);
	}
}
</style>
